<!-- 相当于给模板定义一个名字 define end 成对出现 -->
 {{ define "backstage/userInfo.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天猫商城</title>
    <link rel="shortcut icon" href="/static/images/tianmao.jpg" type="image/x-icon">
    <style>
        .back {
            height: 100vh;           /* 容器高度，例如100%视口高度 */
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */

            .sub-form {
                background-color: antiquewhite;
                width: 80vh;
                /* height: 500px; */
                padding-bottom: 10px;
                margin-top: 50px;
                .title {
                    color: rgb(86, 105, 202);
                    margin: 50px 0 50px;
                    text-align: center;
                }
                .dd-align{
                    display: flex;
                    align-items: center;
                }
                .need {
                    color: red;
                }
                .err {
                    color: red;
                    margin-top: 10px;
                }
                .btn {
                    background-color: white;
                    color: green;
                    border: 1px solid white;
                    cursor: pointer;
                    margin-left: 40px;
                }
            }
        }
        input {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="back">
         <div class="sub-form">
            <form style="margin: 20px;" action="/back/doUser/{{.info.Id}}" method="post">
                <div><h2 class="title">用户信息</h2></div>
                <dl>
                    <dd>
                        <span class="need">*</span>用户名： 
                        <input required maxlength="10" type="text" name="name" id="name" value="{{.info.Name}}" placeholder="请输入用户名,不超过10个字符">
                    </dd>
                    <br>
                    <dd>
                        <span class="need">*</span>性别： 
                        <select required id="sex" name="sex">
                            <option disabled selected>请选择性别</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </dd>
                    <br>
                    <dd>
                        <span class="need">*</span>年龄： 
                        <input required type="number" pattern="\d*" min="0" name="age" id="age" value="{{.info.Age}}" placeholder="请输入年龄">
                    </dd>
                    <br>
                    <!-- <dd>
                        <span class="need">*</span>地址： 
                        <input required type="text" name="address" id="address" value="{{.info.Address}}" placeholder="请输入地址">
                    </dd> -->
                    <dd class="dd-align">
                        <div><span class="need">*</span><span>地址：</span> </div>
                        <textarea required maxlength="50" cols="30" rows="4" name="address" id="address" placeholder="请输入地址,不超过50个字符">{{.info.Address}}</textarea>
                    </dd>
                    <br>
                    {{if eq .optKey 3}}
                        <dd>
                            创建时间： 
                            <input required disabled type="text" name="createTime" value="{{DbTimeToTime .info.CreateTime}}">
                        </dd>
                        <br>
                        <dd>
                            更新时间： 
                            <input required disabled type="text" name="updateTime" value="{{DbTimeToTime .info.UpdateTime}}">
                        </dd>
                        <br>
                    {{else}}
                        <br>
                    {{end}}
                    <br>
                    <dd>
                        {{if eq .optKey 1}}
                            <input class="btn" type="submit" value="添加">
                        {{else if eq .optKey 2}}
                            <input class="btn" type="submit" value="修改">
                        {{end}}
                        <input class="btn" type="button" value="返回" onclick="back()">
                    </dd>
                </dl>
            </form>
         </div>
    </div>
    <script>
        init();
        function init(){
            document.getElementById("sex").value={{.info.Sex}};
            let optTag = {{.optKey}};
            if(optTag==3){
                document.getElementById("name").disabled=true;
                document.getElementById("sex").disabled=true;
                document.getElementById("age").disabled=true;
                document.getElementById("address").disabled=true;
            }
        }
        function back(){
            location.href="/back/userMgr/curPage/1";
        }
    </script>
</body>
</html>
{{ end }}